<template>
  <div class="Echarts">
<!--    <h2 :dataId="$route.query.id"> {{$route.query.id}}</h2>-->
    <div id="main"style="width: 375px;height:300px;" ></div>
    <div id="main2"style="width: 375px;height:300px;" ></div>
    <van-button size="mini" @click="getData">shuju</van-button>
  </div>
</template>

<script>
import {request} from "../network/request";

var echarts = require('echarts');
export default {

  name: 'Echarts',
  data(){
    return {
      textdata:'',
      dataId:'',
      list:[          // 数据数组，name 为数据项名称，value 为数据项值
        {value:235, name:'亿计流量'},
        {value:274, name:'分布式系统'},
        {value:310, name:'网络爬虫'},
        {value:335, name:'netty'},
        {value:400, name:'搜索引擎'}
      ],
      dataList:[]
    }
  },

  created() {
    this.getData();
  },
  mounted() {

  },
  methods:{
    getData(){
      // request({
      //   url: '/card/getList',
      //   method:'get'
      // }).then(res => {
      //   this.dataList=res.data;
      //   this.myEcharts();
      //   this.myEcharts2();
      // }).catch(err => {
      //   console.log(err);
      // })
      console.log(this.dataId);
      console.log("----"+this.$route.query.id);
      this.textdata=this.$route.query.name;
      request({
        url: '/habitDetail/getDataForWeek/'+this.$route.query.id,
        method:'get'
      }).then(res => {
        console.log(res.data);
        this.dataList=[];
        this.list=[];
        // res.data.map(item=>this.habitNameList.push({"keyId":item.id,"text":item.habitName}));
        res.data.map(item=>this.dataList.push(item.once));
        res.data.map(a=>this.list.push({"value":a.todayTime,"name":a.startTime}));
        console.log(this.dataList);
        console.log(this.list);
        this.myEcharts();
        this.myEcharts2();
      }).catch(err => {
        console.log(err);
      })

    },

    myEcharts(){
      // 基于准备好的dom，初始化echarts实例
      // var myChart = this.$echarts.init(document.getElementById('main'));
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          // text: '学习数据表'
          text: this.textdata
        },
        tooltip: {},
        legend: {
          data:['次数']
        },
        xAxis: {
          // data: ["res","mysq","es","亿计","c2c","pyth"]
          data: ["21","22","23","24","25","26","27"]
        },
        yAxis: {},
        series: [{
          name: '次数',
          type: 'bar',
          // data: this.dataList
          data:this.dataList
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    myEcharts2(){
      // 基于准备好的dom，初始化echarts实例
      // var myChart = this.$echarts.init(document.getElementById('main'));
      var myChart = echarts.init(document.getElementById('main2'));
      // 指定图表的配置项和数据
      var option = {
        series : [
          {
            name: '访问来源',
            type: 'pie',    // 设置图表类型为饼图
            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            // data:[          // 数据数组，name 为数据项名称，value 为数据项值
            //   {value:235, name:'视频广告'},
            //   {value:274, name:'联盟广告'},
            //   {value:310, name:'邮件营销'},
            //   {value:335, name:'直接访问'},
            //   {value:400, name:'搜索引擎'}
            // ]
            data:this.list
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>

<style>

</style>
